<template>
  <div class="address">
    <van-radio-group :value="commonAddr" @change="onChange">
      <van-cell-group>
        <div class="additem" v-for="(item, index) in addressList" :key="index">
          <van-cell
            :label="item.province + item.city + item.area + item.addr"
            @click.self="btn(item.addrId)"
          >
            <view slot="title">
              <view class="van-cell-text"
                >{{ item.receiver }}
                <span class="sp">
                  {{ item.mobile }}
                </span>
              </view>
            </view>
            <van-icon
              slot="right-icon"
              name="edit"
              class="custom-icon"
              @click="editAddress(item.addrId)"
            />
          </van-cell>
          <van-radio class="radio" :name="item.addrId" checked-color="#ee0a24">
            <span class="radio"> 设为默认地址 </span>
          </van-radio>
        </div>
      </van-cell-group>
    </van-radio-group>
    <van-button
      type="default"
      hairline
      plain
      color="#ee0a24"
      class="bottombtn"
      block
      @click="addlist"
      >新增收货地址</van-button
    >
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { changeDefaultAddr } from "@/services/index";
export default {
  data() {
    return {
      click: false, //判断是否是订单页跳转过来的
      orderEntry: 0, //判断是直接购买的还是从购物车购买的
    };
  },
  computed: {
    ...mapState("address", ["addressList"]),
    commonAddr() {
      if (this.addressList.length > 0) {
        return this.addressList.find((v) => v.commonAddr === 1).addrId;
      }
    },
  },
  methods: {
    ...mapActions("address", ["getAddressList"]),
    // 改变默认地址
    async onChange(e) {
      await changeDefaultAddr(e.detail);
      this.getAddressList();
    },
    // 添加地址
    addlist() {
      wx.navigateTo({
        url: "../editAddress/index",
      });
    },
    // 修改地址
    editAddress(addrId) {
      wx.navigateTo({
        url: "../editAddress/index?addrId=" + addrId,
      });
    },
    // 跳转提交订单页
    btn(addrId) {
      // 如果是订单页跳转过来的则能点击跳回订单页
      if (this.click) {
        wx.redirectTo({
          url: `/pages/submit-order/index?orderEntry=${this.orderEntry}&addrId=${addrId}`,
        });
      }
    },
  },
  async mounted() {
    let { order, orderEntry } = this.$mp.query;
    if (order === "0") {
      this.click = true;
    }
    this.orderEntry = orderEntry;
    // 请求数据
    await this.getAddressList();
  },
};
</script>

<style scoped>
.address {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  padding: 0;
  margin: 0;
}
.bottombtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
}
.additem {
  margin-bottom: 10rpx;
}
.sp {
  margin-left: 20rpx;
  font-size: 24rpx;
}
.radio {
  margin-left: 10rpx;
  font-size: 26rpx;
}
.van-radio {
  padding-left: 30rpx;
  background-color: #fff;
  margin-top: -50rpx;
}
</style>
